<template>
  <a-modal @cancel="close" title="去处理" width="45vw" v-model:visible="visible" unmount-on-close>
    <div style="height: 460px">
      <div class="form-items">工单类型：换车工单</div>
      <!-- 参考里程/油电量 -->
      <box-info :carId="form.carId" style="margin-bottom: 20px; padding-left: 0" />
      <div style="margin: 10px; color: #1d2129; font-size: 16px; font-weight: 500">换上车信息</div>
      <page-form :model="form" layout="vertical" :rules="rules" ref="formRef">
        <page-form-row>
          <page-form-item label="车辆来源" size="1">
            <a-radio-group v-model="form.carSource" @change="radioChange">
              <a-radio :value="item.value" v-for="item in vEnumList" :key="item.value">
                {{ item.label }}
              </a-radio>
            </a-radio-group>
          </page-form-item>
          <page-form-item label="车牌号" field="carLicenseNo" required size="1">
            <a-select
              :style="{ width: '300px' }"
              v-model="form.carLicenseNo"
              placeholder="请选择"
              @click="chooseCar"
              :popup-visible="false"
            />
          </page-form-item>
          <page-form-item label="车型" size="1">
            <div class="car-model">{{ form.carModelName ? form.carModelName : '-' }}</div>
          </page-form-item>
        </page-form-row>
        <div class="line"></div>
        <page-form-row>
          <page-form-item label="出库里程" size="1/2">
            <i-input-number v-model="form.outCarMileage" placeholder="请输入" :precision="0" unit="公里" />
          </page-form-item>
          <page-form-item label="出库油（电）量" size="1/2">
            <i-input-number v-model="form.outCarOil" placeholder="请输入" :precision="0" unit="" :min="1" :max="99999" />
          </page-form-item>
          <page-form-item field="remark" label="备注" size="1">
            <a-textarea placeholder="请输入" :max-length="100" v-model="form.remark" auto-size />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="close">关闭</a-button>
        <a-button type="primary" @click="handleBeforeOk" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
  <!-- 排车 -->
  <car-selector ref="carSelectorRef" mode="select" @confirm="carConfirmFn" />
</template>

<script setup name="handleChangecarWorkorderModal">
  import carSelector from '@/views/assets/car/stock/car-selector.vue'
  import { goHandle } from '@/api/business/workorder'
  import { Message } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  import { ref } from 'vue'
  import boxInfo from '../components/box-modal.vue'
  // emit 事件
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  const orderInfo = ref({})
  const isChooseCarId = ref(null) //换下车
  const records = ref({})
  const form = ref({
    carSource: 1,
  })
  const rules = {
    carLicenseNo: [{ required: true, message: '请选择车辆' }],
  }

  const vEnumList = ref([
    { value: 1, label: '门店车辆' },
    { value: 3, label: '跨门店调车' },
  ])
  const radioChange = (e) => {
    console.log(e)
    form.value.carSource = e

    form.value.carId = undefined
    form.value.carLicenseNo = undefined
    form.value.carModelId = undefined
    form.value.carModelName = undefined
  }
  const chooseCar = () => {
    console.log('弹窗选择车辆')
    platoonCarFn()
  }
  const open = (record) => {
    console.log(record)
    records.value = record
    isChooseCarId.value = records.value.replacedCarId //换下车（排车图打开时默认选中
    form.value = {
      carSource: records.value.carSource,
      carId: records.value.carId,
      carLicenseNo: records.value.carLicenseNo,
      carModelId: records.value.carModelId,
      carModelName: records.value.carModelName,
      id: record.id,
      workType: record.workType,
      outCarMileage: record.outCarMileage,
      outCarOil: record.outCarOil,
    }
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
  }
  // 选择车牌号
  const carSelectorRef = ref()
  const carSelectorModalTitle = ref('选择车牌号')
  const platoonCarFn = () => {
    // 换车时间
    let startTime = records.value.orderInfo.replacedCarTime
    const endTime = records.value.orderInfo.endTime
    if (dayjs(startTime).valueOf() > dayjs(endTime).valueOf()) {
      // 将开始时间设置为预计开始时间
      startTime = records.value.orderInfo.startTime
    }
    const param = {
      id: form.value.carId ? form.value.carId : undefined,
      carSource: form.value.carSource,
      dateRange: [startTime, endTime],
    }
    carSelectorRef.value.open(param, {
      orderStatus: records.value.orderInfo.orderStatus, //10
      siteId: records.value.siteId, //98
      startTime: records.value.orderInfo.startTime, //预取
      endTime: records.value.orderInfo.endTime, //预还
      platoonCarId: isChooseCarId.value, //占用被换车
    })
  }
  // 选择车牌完成后
  // 记录弹窗queryParam
  const carConfirmFn = (id, option = {}, queryParam) => {
    form.value.carId = id
    form.value.carLicenseNo = option.licenseNo
    form.value.carModelId = option.modelId
    form.value.carModelName = option.modelName
  }
  const formRef = ref()
  const okLoading = ref(false)
  const validateFn = () => {
    okLoading.value = true
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          okLoading.value = false
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const handleBeforeOk = (done) => {
    return new Promise((resolve, reject) => {
      validateFn().then(() => {
        goHandle({ ...form.value })
          .then((res) => {
            console.log(res)
            Message.success(res.message)
            emit('ok')
            visible.value = false
            done()
            resolve()
          })
          .finally(() => {
            okLoading.value = false
          })
      })
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 0 10px !important;
  }
  :deep(.arco-form-item) {
    margin-bottom: 5px !important;
  }
  .form-items {
    margin: 16px 10px;
  }
  .car-model {
    padding: 12px;
    width: 100%;
    background: #f7f8fa;
    color: #1d2129;
    font-weight: 400;
    font-size: 14px;
  }
  .line {
    width: calc(100% - 20px);
    height: 1px;
    background: #f2f3f5;
    margin: 10px;
  }
</style>
